<!DOCTYPE html>  
<html lang="en">  
<head>  
	<meta charset="UTF-8">  
	<meta name="viewport" content="width=device-width, initial-scale=1.0">  
	<title>Canvas绘制视频示例</title>  
</head>  
<body>  
	<video id="video1" style="display:none;" preload="auto" muted loop = "loop">  
		<source src="assets/video/1717658488515_3480.mp4" type="video/mp4">
		您的浏览器不支持HTML5视频标签。  
	</video>  
	<canvas id="myCanvas" width="640" height="360"></canvas>  
  
	<script>  
		var video = document.getElementById('video1');  
		var canvas = document.getElementById('myCanvas');  
		var ctx = canvas.getContext('2d');  
  
		video.addEventListener('loadeddata', function() {  
			canvas.width = video.videoWidth;  
			canvas.height = video.videoHeight;  
			draw();  
		});  
  
		function draw() {
			if (video.paused || video.ended) {  
				return;  
			}  
			ctx.drawImage(video, 0, 0, canvas.width, canvas.height);  
			requestAnimationFrame(draw);  
		}  
  
		video.play();  
	</script>  
</body>  
</html>